<template>
	<view class="background">
		<view style="width: 100%; height: 70%; display: flex; align-items: center; justify-content: center;">
			<view :animation="sendAnimationData" style="height:100rpx;width:100rpx" v-if="showSendAction">
				<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/bottle/three/bottle.png" mode="widthFix" style="width: 300rpx; height: 300rpx;"></image>
			</view>
			<view :animation="animationData" style="height:100rpx;width:100rpx" v-if="showAction">
				<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/bottle/first/beach_fishingrod_move.png" mode="aspectFill"
					style="width: 150rpx; height: 200rpx;"></image>
			</view>
		</view>

		<view style="width: 100%; height: 20%; display: flex; justify-content: center;">
			<view class="bottom">
				<view class="nav-link" style="position: relative; width: 200rpx;" @click="openSend">
					<view class="nav-counter">{{throwNum}}</view>
					<view class="bottom back_item">
						<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/bottle/first/bottle_v.png" mode="aspectFit" style="width: 100rpx; height: 100px;">
						</image>
					</view>
					<view class="bottom text">扔一个</view>
				</view>

				<view class="nav-link" style="position: relative; width: 200rpx;" @click="findBottle">
					<view class="nav-counter">{{pickNum}}</view>
					<view class="bottom back_item">
						<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/bottle/first/beach_fishingrod.png" mode="aspectFit"
							style="width: 150rpx; height: 100px;"></image>
					</view>
					<view class="bottom text">捞一个</view>
				</view>
			</view>
		</view>

		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="input" message="成功消息" title="扔一个" placeholder="你想对他/她说什么" :duration="2000"
				:before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>

		<uni-popup ref="messagePop">
			<view style="background-color: #fff; width: 500rpx; height: 500rpx; border-radius: 50rpx;">
				<view style="padding-top: 30rpx; padding-left: 30rpx; display: flex; align-items: center;">
					<view style="width: 100rpx;">
						<image :src="paper.avatar" style="width: 100rpx; height: 100rpx; border-radius: 50%;"></image>
					</view>
					<view style="padding-left: 12rpx;">
						<view>{{paper.username}}</view>
						<view>
							<u-icon v-if="paper.gender==1" name="man" color="#007aff" size="50"></u-icon>
							<u-icon v-else-if="paper.gender==2" name="woman" color="#dd524d" size="50"></u-icon>
						</view>
					</view>
				</view>
				<view style="width: 100%; height: 290rpx;padding: 30rpx 30rpx 0rpx 30rpx;box-sizing: border-box;">
					<textarea placeholder="请输入内容" v-model="paper.content"
						style="width: 100%;height: 100%; border-radius: 5rpx;"></textarea>
				</view>
				<view class="box box-align-center box-pack-around" style="margin-bottom: 30rpx;">
					<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/bottle/four/rhdh.png" mode="aspectFit" style="width: 150rpx; height: 70rpx;"
						@click="throwOcean"></image>
					<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/bottle/four/huifu.png" mode="aspectFit" style="width: 150rpx; height: 70rpx;"
						@click="replyMessage"></image>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="messageSend">
			<view style="background-color: #fff; width: 500rpx; height: 500rpx; border-radius: 50rpx;">
				<view style="width: 100%; height: 400rpx;padding: 40rpx;box-sizing: border-box;">
					<textarea placeholder="请输入内容" v-model="sendContent"
						style="width: 100%;height: 100%; border-radius: 5rpx;"></textarea>
				</view>
				<view class="box box-align-center box-pack-around">
					<view class="sendButton" @click="sendPaperControl">扔一个</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		Static
	} from "vue"
	import {
		getPickAndThrowNum,
		pickUpBottle,
		replyPaper,
		sendPaper
	} from "../../api/login"
	export default {
		data() {
			return {
				showThrow: false,
				animation: '',
				animationData: {},
				showAction: false,
				showSendAction: false,
				sendAnimationData: {},
				sendContent: "",
				//捡到的纸条详细信息
				paper: {
					paperId: 0,
					content: '',
					userId: 0, //写纸条的人
					username: '',
					avatar: '',
					gender: 0,
					uuid: ''
				},
				pickNum: 5,
				throwNum: 5
			}
		},
		onLoad() {
			console.log("this is goEasy", this.goEasy.getConnectionStatus())
			if (!uni.getStorageSync('userId')) {
				uni.showModal({
					'title': "提示",
					content: '请先登录',
					success:function(res){
						if (res.confirm) {
							uni.switchTab({
								url: '/pages/userHome/userHome'
							})
						}
					}
				})
			}
		},
		onUnload() {
			this.animationData = {}
		},
		onShow() {
			this.getNums()
		},

		methods: {
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},

			sendBottle() {
				this.showSendAction = true
				this.animation = uni.createAnimation({
					timingFunction: "ease-out"
				})
				this.animation.scale(0.2).opacity(1).step({
					dureation: 1500
				})
				this.sendAnimationData = this.animation.export()
				setTimeout(() => {
					this.animation.scale(1).opacity(0).step({
						duration: 0
					})
					this.sendAnimationData = this.animation.export()
				}, 1500)
			},

			reset() {
				this.animation = uni.createAnimation({
					timingFunction: "ease-in-out"
				})
				this.animation.rotate(0, 0).scale(1).translate(0, 0).skew(0, 0).step({
					duration: 0
				});
				this.sendAnimationData = this.animation.export()
			},
			confirm(value) {
				// 输入框的值
				this.$refs.popup.close()
				uni.showLoading({
					title: '扔向大海中'
				});
				setTimeout(function() {
					uni.hideLoading();
				}, 1000);
			},

			findBottle1() {
				this.showAction = true
				this.animation = uni.createAnimation({})
				// this.animation.rotateZ(Math.random() * 31 + 30).step({}).rotateZ(0).step({})
				this.animation.rotateZ(Math.random() * 31 + 30).opacity(1).step({
					dureation: 700
				})
				this.animationData = this.animation.export()
				setTimeout(() => {
					this.animation.rotateZ(0).step({
						dureation: 500
					}).rotate(0).opacity(0).step({
						dureation: 0
					})
					this.animationData = this.animation.export()
					pickUpBottle({
						id: uni.getStorageSync("userId")
					}).then(res => {
						this.paper = res.data
						setTimeout(() => {
							this.$refs.messagePop.open()
						}, 600)
					}).catch(err => {
						uni.showToast({
							title: err.msg,
							icon: "none",
							duration: 1500
						})
					})
					this.getNums()
				}, 800)

			},

			//这个动画自己做的好丑 先舍弃动画
			findBottle() {
				if(this.pickNum <= 0) {
					uni.showToast({
						title: "明天再来捡吧",
						icon: "none",
						duration: 1000
					})
					return
				}
				uni.showLoading({
					title: "努力打捞中...",
				})
				setTimeout(() => {
					pickUpBottle({
						id: uni.getStorageSync("userId")
					}).then(res => {
						this.paper = res.data
						this.$refs.messagePop.open()
						this.getNums()
					}).catch(err => {
						//加载没有获取到瓶子的动画
						uni.showToast({
							title: err.msg,
							icon: "none",
							duration: 1500
						})
						this.getNums()
					})
					uni.hideLoading()
				}, 1500)
			},


			throwOcean() {
				replyPaper({
					id: uni.getStorageSync("userId"),
					sender_id: this.paper.userId,
					paper_id: this.paper.paperId,
					is_reply: -1
				}).then(res => {
					console.log("扔瓶子成功")
				}).catch(err => {
					console.log("扔瓶子失败")
				})
				this.$refs.messagePop.close()
			},
			replyMessage() {
				replyPaper({
					id: uni.getStorageSync("userId"),
					sender_id: this.paper.userId,
					paper_id: this.paper.paperId,
					is_reply: 1
				}).then(res => {
					let item = {
						type: 'private',
						unread: 0,
						data: {
							"avatar": this.paper.avatar,
							"nickname": this.paper.username
						},
						lastMessage: {
							"payload": {
								"text": this.paper.content
							},
							"receiverId": this.paper.uuid,
							"senderId": this.paper.uuid
						}
					}
					uni.navigateTo({
						url: '/pages_subpackage/messageControl/test?item=' + encodeURIComponent(JSON
							.stringify(item))
					});
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: "none",
						duration: 1000
					})
				})
				this.$refs.messagePop.close()
			},
			openSend() {
				this.$refs.messageSend.open()
			},
			isEmpty(input) {
				return input === null || input === undefined || input === '';
			},
			sendPaperControl() {
				//如果消息不为空
				if (!this.isEmpty(this.sendContent)) {
					let obj = {
						content: this.sendContent,
						userId: uni.getStorageSync("userId")
					}
					this.sendContent = '';
					sendPaper(obj).then(res => {
						this.$refs.messageSend.close()
						// this.sendBottle()
						this.getNums()
						uni.showToast({
							title:"扔成功啦",
							icon: "success",
							duration: 1000
						})
					}).catch(err => {
						this.$refs.messageSend.close()
						uni.showToast({
							title: err.msg,
							icon: 'none',
							duration: 1500
						})
					})
				} else {
					uni.showToast({
						title: '发送内容不能为空',
						icon: 'none',
						duration: 1500
					});
				}
			},
			getNums() {
				getPickAndThrowNum({
					id: uni.getStorageSync("userId")
				}).then(res => {
					this.pickNum = res.data.pick_num
					this.throwNum = res.data.throw_num
				}).catch(err => {
					console.log("这是错误", err)
				})
			}
		},

	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.background {
		background-image: url('/static/first/beach_bg.png');
		/* 替换为你的图片路径 */
		background-size: cover;
		/* 背景图片覆盖整个容器 */
		background-position: center;
		/* 图片居中 */
		background-repeat: no-repeat;
		/* 不重复图片 */
		height: 100%;
		/* 高度设置为100%，使其覆盖整个视口 */
		width: 100%;
		/* 宽度设置为100%，使其覆盖整个视口 */
		position: fixed;
		/* 背景固定，内容可以在其上层显示 */
	}

	.message {
		/* 替换为你的图片路径 */
		background-size: cover;
		/* 背景图片覆盖整个容器 */
		background-position: center;
		/* 图片居中 */
		background-repeat: no-repeat;
		/* 不重复图片 */
		height: 100%;
		/* 高度设置为100%，使其覆盖整个视口 */
		width: 100%;
		/* 宽度设置为100%，使其覆盖整个视口 */
		position: fixed;
		/* 背景固定，内容可以在其上层显示 */
	}

	.animation-element {
		width: 200rpx;
		height: 200rpx;
		background-color: rgba(248, 89, 89, 1);
	}

	.sendButton {
		width: 75px;
		height: 25px;
		font-size: 16px;
		/* border: 1px; */
		border-style: solid;
		border-width: 1px;
		border-radius: 5px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bottom {
		width: 600rpx;
		display: flex;
		justify-content: space-between;

		.back_item {
			display: flex;
			justify-content: center;
			background-color: rgba(242, 242, 242, 0.8);
			width: 200rpx;
			border-radius: 14rpx;
		}

		.text {
			width: 200rpx;
			display: flex;
			justify-content: center;
		}
	}
</style>

<style>
	.nav-link {
		position: relative;
		/* padding: 0 14px; */
		line-height: 34px;
		color: #555;
	}

	.nav-counter {
		position: absolute;
		top: -1px;
		right: -10px;
		min-width: 8px;
		height: 20px;
		line-height: 20px;
		margin-top: -11px;
		padding: 0 6px;
		font-weight: normal;
		color: white;
		text-align: center;
		text-shadow: 0 1px rgba(0, 0, 0, 0.2);
		background: #e23442;
		border: 1px solid #911f28;
		border-radius: 11px;
		background-image: -webkit-linear-gradient(top, #e8616c, #dd202f);
		background-image: -moz-linear-gradient(top, #e8616c, #dd202f);
		background-image: -o-linear-gradient(top, #e8616c, #dd202f);
		background-image: linear-gradient(to bottom, #e8616c, #dd202f);
		-webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(0, 0, 0, 0.12);
		box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(0, 0, 0, 0.12);
	}
</style>